<style lang="less">
  @import './Papers.less';
</style>
<template>
<div>
  <div id="papers" v-show="isEditing==1"> 
    <Form :model="seachForm" inline :label-width="80" >
        <FormItem prop="name" :label="$t('name')">
          <Input v-model="seachForm.name" placeholder="请输入试卷名"></Input>
        </FormItem>
      <FormItem>
        <Button icon="ios-search" @click="seacherSubmit('seacherForm')">查询</Button>
      </FormItem>
    </Form>
    <ButtonGroup >
      <Button icon="ios-add" @click="btnAddClick">新增</Button>
      <Button icon="ios-create" @click="btnEditClick" :disabled="!currentRow">修改</Button>
      <Button icon="ios-trash" @click="btnDelClick" :disabled="!currentRow">删除</Button>
    </ButtonGroup>
    <Table  border highlight-row ref="currentRowTable" @on-current-change="tableCurrentChange" :columns="columns" :data="datas"></Table> 
    <Page :total="pageInfo.totalRows" @on-change="pageNumberChange" />
 </div>
  <div id="paper" v-show="isEditing==2" >
    <Form :model="seachForm" inline :label-width="80"  >
      <FormItem prop="name" :label="$t('试卷名')" >
        <Input style="width: 150px" v-model="dataForm.name" placeholder="试卷名不得为空" clearable></Input>
      </FormItem>
       <!--课程   v-model="dataForm.subjectId" -->
      <FormItem prop="subjectId" :label="$t('所属课程')">
      </FormItem>
      <br/>
      <FormItem prop="status" :label="$t('status')">
            <i-select v-model="dataForm.status">
              <i-option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
            </i-select>
          </FormItem>
      <FormItem  :label="$t('难度等级')">
            <InputNumber :max="10" :min="1"  v-model="dataForm.grade" ></InputNumber>
      </FormItem>
      <br/>
      <FormItem prop="intro" :label="$t('paperIntro')">
        <Input v-model="dataForm.intro" clearable style="width: 600px" type="textarea" :autosize="{minRows: 5,maxRows: 10}" placeholder="Enter something..."></Input>
      </FormItem>
      <br/>
      <FormItem>
        <Button type="primary" @click="btnSaveClick">保存</Button>
        <Button style="margin-left: 8px" @click="btnCancelClick">取消</Button>
        <Button style="margin-left: 8px" @click="btnQuestionClick">题目管理</Button>
      </FormItem>
    </Form>
  </div>
  <div id="questionb" v-show="isEditing==3" >
     <Table  border highlight-row  @on-selection-change="deleteChange1" :columns="fuckColumns"  
         :data="questionsDatas1"></Table>
    <Table  border highlight-row  @on-selection-change="deleteChange1" :columns="questionColumns"  
         :data="reDatas1"></Table>
    <ButtonGroup >
        <Button icon="ios-add" @click="btnAddClick1" :disabled="!addDatas1.length" >增加</Button>
        <Button icon="ios-add" @click="btnDelClick1" :disabled="!deleteDatas1.length" >删除</Button>
        <Button icon="ios-add"  >系统生成</Button>
        </ButtonGroup>
    <Table  border highlight-row  @on-selection-change="addChange1" :columns="questionColumns" 
    :data="allDatas1"></Table>
  </div>
</div>
</template>
<script>
  import {getPaperList,getPaper, addPaper, updatePaper, deletePaper } from '@/api/papers'
  import {getQuestionList, getQuestion, addQuestion, updateQuestion, deleteQuestion} from '@/api/question'
  import {getSubjectList}from '@/api/subjects'
  import{getPaper_questionList,getPaper_question, addPaper_question, 
  updatePaper_question, deletePaper_question } from '@/api/paper_questions'
  import AnswerRadio from '../../components/answer-radio/index';
  import AnswerCheckBox from '../../components/answer-checkbox/index';
  import AnswerJudge from '../../components/answer-judge/index';
  import AnswerCompute from '../../components/answer-compute/index';

export default 
{
  name: 'papers',
  data() {
    return {
    //状态栏
      statusList: 
      [
        {label: '正常', value: 1},
        {label: '未完成', value: 2},
        {label: '待审核', value: 3},
      ],
    //
    //试卷包含分数
      questionType:"select",
      nowScores1:0,
      nowScores2:0,
      nowScores3:0,
      nowScores4:0,
    //
    //首页列表
      currentRow: null,
      selection: [],
      allSelection: [],
      isEditing:1,
       seachForm:
       {     //试卷检索

        name: '',
        intro: '',
        subjectId:'',
      },
       pageInfo: //分页
               {
                pageNumber: 1,
                pageSize: 10,
                totalRows: 0
              },
       dataForm: {},//选中试卷
       seachQuestionForm:
       {     //试卷检索

        name: '',
        intro: '',
        subjectId:'',
      },
    //
    //格式
    fuckColumns:
     [
                {
                type: 'index',
                width: 60,
                align: 'center'
                }, 
              {
                title: this.$t('id'),
                key: 'id'
              }, 
              {
               title: this.$t('timu'),
                key: 'questionId'
              }, 
              {
                title: this.$t('试卷名'),
                key: 'paperId'
              },
              {
                title: this.$t('type'),
                key: 'type'
              }, 
              
             
     ],
         columns://表格信息
          [
                {
                type: 'index',
                width: 60,
                align: 'center'
                }, 
              {
                title: this.$t('paperId'),
                key: 'id'
              }, 
              {
                title: this.$t('试卷名'),
                key: 'name'
              },
              {
                title: this.$t('所属课程'),
                key: 'courseId'
              }, 
              {
              title: this.$t('试卷介绍'),
                key: 'intro'
              }, 
              {
              title: this.$t('难度等级'),
                key: 'grade'
              },
                {
                    title: this.$t('status'),
                    key: 'status',
                    align: 'center',
                    render: (create, record) => 
                    {
                      const status = record.row.status;
                      console.log(status);
                      const statusMap = {
                        'success': '正常',
                        'warning': '未完成',
                        'error': '禁用'
                      };
                      let clazz = 'success';
                      if (status === 2) { //禁用
                        clazz = 'error';
                      } else if (status === 3) { // 待审核
                        clazz = 'warning';
                      }
                      return create('Tag', 
                      {
                        props: {
                          type: clazz,
                        },
                        domProps: {
                          innerHTML: statusMap[clazz],
                        },
                      });
                    }
                  },
          ],
         questionColumns: 
         [
          {
            type: 'selection',
            width: 60,
            align: 'center',
          },
          {
            width: 60,
            align: 'center',
            title: 'Id',
            key: 'id'
          },
          {
            title: this.$t('q_content'),
            key: 'content',
          },

          {
            title: this.$t('q_type'),
            key: 'type',
            render(create, record) {
              const types = [
                '单选',
                '多选',
                '判断',
                '简答',
              ];
              return create('span', types[record.row.type - 1])
            }
          },

          {
            title: this.$t('right_count'),
            key: 'right'
          },
          {
            title: this.$t('wrong_count'),
            key: 'wrong'
          },
          {
            title: this.$t('username'),
            key: 'name'
          },
          {
            title: this.$t('tag'),
            key: 'tag',
            render(create, record) {
              return create('div', {}, record.row.tag.split(',').map((item => {
                  if (item) {
                    return create('Tag',
                      {
                        props: {
                          type: 'border',
                          color: 'primary'
                        },
                        domProps: {
                          innerHTML: item,
                        },
                      })
                  }
                }
              )))
            }
          },
          {
            title: this.$t('status'),
            key: 'status',
            align: 'center',
            render: (create, record) => {
              const status = record.row.status;
              const statusMap = {
                'success': '正常',
                'warning': '待审核',
                'error': '禁用'
              };
              let clazz = 'success';
              if (status === 2) { //禁用
                clazz = 'error';
              } else if (status === 3) { // 待审核
                clazz = 'warning';
              }
              return create('Tag', {
                props: {
                  type: clazz
                },
                domProps: {
                  innerHTML: statusMap[clazz],
                },
              });
            }
          },
        ],
       
    //
    //列表
      datas: [],//试卷列表
     

      questionsDatas1:[],//试卷题目列表1
      reDatas1:[],
      allDatas1:[],//
      addDatas1:[],
      deleteDatas1: [],

    //
      
    }
  },
  created() 
  {
    
  },
  mounted() 
  {
    this.queryList();
  },
  methods: 
  {
    //搜索
      seacherSubmit: function () {
        this.pageInfo.pageNumber = 1;
        this.queryList();
        },
    //
    //换页
     pageNumberChange: function (pagenum) 
        {
          this.pageInfo.pageNumber = pagenum;
          this.queryList();
        },
    //
    //列表
     queryList: function ()
        {  
            var queryParams = 
            {
              name: this.seachForm.name,
              pageNumber: this.pageInfo.pageNumber,
              pageSize: this.pageInfo.pageSize
            };
         getPaperList(queryParams).then(res => 
            {
              this.datas = res.data.rows;
              this.pageInfo.totalRows = parseInt(res.data.total);
            });
        },
    //
    //换页  pagenumberchange
        pageNumberChange: function (pagenum) 
        {
          this.pageInfo.pageNumber = pagenum;
          this.queryList();
        },
    //
    //换行 tableCurrentChange
        tableCurrentChange: function (currentRow, oldCurrentRow) //换行
        {
          this.currentRow = currentRow;
        },
    //
    //添加按钮add
       btnAddClick: function () {//添加
            this.courseDataForm = {status: 2};
            this.isEditing = 2;
          },
    //
    //修改按钮edit
          btnEditClick: function ()
           {
            this.dataForm = this.currentRow;
            this.isEditing = 2;
          },
    //
    //删除按钮del
       btnDelClick: function () 
       {
            this.$Modal.confirm({
              title: '删除',
              content: '确定要删除选中的信息吗?',
              onOk: () => {
                this.delData();
              }
            });
            
          },
    //
    //删除事件
        delData: function () 
          {
            deleteCourse(this.currentRow.id).then(res => {
              console.log(res);
              if (res.data && res.data.affectedRows > 0) {
                this.$Message.success('删除成功!');
                this.queryList();
              } else {
                this.$Message.error('删除失败!');
              }
            });
          },
    //
    //保存按键saveclick
        btnSaveClick: function () 
        {
              if (this.courseDataForm.id) {
                updateCourse(this.courseDataForm.id, this.courseDataForm).then(res => {
                  if (res.data && res.data.affectedRows > 0) {
                    this.$Message.success('保存成功!');
                    this.queryList();
                    this.isEditing = 1;
                  } else {
                    this.$Message.error(res.error);
                  }
                });
              } else {
                addCourse(this.courseDataForm).then(res => {
                  if (res.data && res.data.affectedRows > 0) {
                    this.$Message.success('保存成功!');
                    this.queryList();
                    this.isEditing = 1;
                  } else {
                    this.$Message.error(res.error);
                  }
                });
              }
        },
    //
    //取消按键cancel
       btnCancelClick: function () {
            this.isEditing = 1;
          },
    //
    //题目列表按钮
      btnQuestionClick: function ()
      {
        this.isEditing = 3;
        this.questionLoad1();
        this.createQuestion1();
      },
    //
    //题目列表
      questionLoad1: function ()
      {
        
        var queryParams = 
        {
          type:1,
          paperId:this.dataForm.id,
        };
        getPaper_questionList(queryParams).then(res => 
            {
              this.questionsDatas1 = res.data.rows;
             // this.pageInfo.totalRows = parseInt(res.data.total);
            });


        var queryParams2 = 
        {
          type: 1,
          courseId:this.dataForm.courseId,
        };
      getQuestionList(queryParams2).then(res2 => 
            {
              this.allDatas1 = res2.data.rows;
              this.allDatas1.map
              (item => 
              {
                let content = JSON.parse(item.content);
                item.content = content.content;
                item.rightAnswer = content.rightAnswer;
                item.answers = content.answers;
                item.category = JSON.parse(item.cate_id);
                delete item.cate_id;
             });
             // this.pageInfo.totalRows = parseInt(res.data.total);
            });
       var len=this.allDatas1.length,//试卷包含的试题
           b=0;
      while(b < len)
      {
      this.allDatas1[b]=Object.assign({}, this.allDatas1[b], { _disabled:false} ); 
      }
      this.reDatas1.push(this.allDatas1[0]);
      this.allDatas1[0]._disabled=true;
    
        
      
      
      },
    //
    //题目内容
      createQuestion1:function()
      {
          this.reDatas1.push(this.allDatas1[0]);
           this.allDatas1[0]._disabled=true;
          var len=this.questionsDatas1.length;//试卷包含的试题  a
          var allLen= this.allDatas1.length;//全部试题  b
           var a=0 ,b=0; 
          while(b < allLen)
          {    a=0 ;
              while(a < len)
              {

            if(this.questionsDatas1[a].questionId==this.allDatas1[b].id)
                  {
                      this.isEditing = 2;
              this.reDatas1.push(this.allDatas1[b]);
              this.allDatas1[b]._disabled=true;
                break;
                  }
              a++;
              }
              b++;
            }
        
        
        

      },
    //
    //题目增删
      deleteChange1: function(selection) {
        this.deleteDatas1= selection;//
      },
      addChange1: function(selection) {
        this.addDatas1 = selection;//
      },
    //
    //添加题目按钮
      btnAddClick1: function() //添加题目
      {
        //this.$Modal.confirm({
        // title: '删除',
        // content: '确定要删除选中的信息吗?',
        //});
        this.questionsDatas1.push.apply(this.questionsDatas1,this.addDatas1);//
        this.addDatas1=[];//清空添加列表
      },
    //
    //题目删除按钮
      btnDelClick1 :function() 
      {

      }
    //
  }
  
}

</script>
